import React, { Component } from 'react'
import { observer } from 'mobx-react/custom'
import { List, TextareaItem, Button } from 'antd-mobile'
import AdviseVM from 'cvm/advise/advise'
import './advise.less'

const AdviseList = observer(({ vm }) => {
  return (
    <div className='advise-detail'>
      <List renderHeader={() => '建议吐槽统统都要'}>
        <TextareaItem
          rows={5}
          count={100}
          onChange={(v) => vm.onChange(v)}
        />
      </List>
      <div className='upload-img-box' id='upload-img-box'>
        <div className='upload-img' id='upload-img'>
          <input type='file' id='multiple' className='multiple' onChange={vm.handleAddImageClick} />
          <img src={require('../../images/add-images.png')} className='add-icon' />
        </div>
      </div>
      <div className='btn-box'>
        <Button type='primary' onClick={() => vm.handleSubmit()} >提交</Button>
      </div>
    </div>
  )
})

@observer
class advise extends Component {
  constructor (props) {
    super(props)
    window.document.title = '意见反馈'
    this.vm = new AdviseVM(props)
  }
  render () {
    return (
      <div>
        <AdviseList vm={this.vm} />
      </div>
    )
  }
}

export default advise
